<template>
  <div class="login">
    <div class="login-box el-col-sm-5 el-col-xs-16">
      <div class="pro-name">{{name}}</div>
      <el-input type="text" class="login-input" v-model="loginObj.mobile" placeholder="账户名"></el-input>
      <el-input type="password" class="login-input" v-model="loginObj.password" placeholder="密码"></el-input>
      <el-button class="full-w" type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>
<script>
  import {
    userService
  }from "api"
  export default{
    data(){
      return {
        name:"考试后台管理系统",
        loginObj:{
          mobile: "",
          password: "",
          hasClick: false
        },
      }
    },
    methods:{
      login(){
        if(this.hasClick) return
        this.hasClick = true
        userService.login(this.loginObj)
        .then(res => {
          this.$notify({
            message: '登陆成功！',
            type: 'success'
          })
          this.$router.push("main")            
        })
        .catch(() => {
          this.$notify({
            message: '账号或密码错误，请认真核对！',
            type: 'warning'
          })
        })
      }
    }
  }
</script>
<style scoped>
  .login{
    background: white;
    height: 100%;
    position: relative;
    text-align: center;
  }
  .login-box{
    height: 300px;
    position: absolute;
    top: 0; right: 0; bottom: 100px; left: 0;
    margin: auto;
  }
  .pro-name{
    font-weight: bolder;
    font-size: 26px;
    padding: 30px 0;
  }
  .login-input{
    margin-bottom: 30px;
  }
</style>